import React from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from 'react-router-dom'

import { Navbar } from './app/Navbar'
import {PostsList} from "./features/posts/PostList";
import {AddPostForm} from "./features/posts/AddPostForm";
import {SinglePostPage} from "./features/posts/SinglePostPage";
import {EditPostForm} from "./features/posts/EditPostForm";
import {UserPage} from "./features/users/UserPage";
import {UserList} from "./features/users/UserList";
import {NotificationsList} from "./features/notifications/NotificationsList";

function App() {
  return (
    <Router>
      <Navbar />
      <div className="App">
        <Switch>
          <Route
            exact
            path="/"
            render={() => (
              // <section>
              //   <h2>Welcome to the Redux Essentials example app!</h2>
              // </section>
              <>
                <AddPostForm></AddPostForm>
                <PostsList></PostsList>
              </>
            )}
          />
          <Route exact path="/posts/:postId" component={SinglePostPage}></Route>
          <Route exact path="/editPost/:postId" component={EditPostForm}></Route>
          <Route exact path="/users" component={UserList}></Route>
          <Route exact path="/users/:userId" component={UserPage}></Route>
          <Route exact path="/notifications" component={NotificationsList}></Route>
          <Redirect to="/"></Redirect>
        </Switch>
      </div>
    </Router>
  )
}

export default App
